<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS盒子模型示例</title>
    <!-- 引入外部CSS文件，建立样式关联 -->
    <link rel="stylesheet" href="lab3-1.css">
</head>
<body>
    <!-- 创建一个section元素，用于存放内容 -->
    <section>
        <!-- 标准盒子模型 -->
        <h3>标准盒子模型</h3>
        <article class="standard-box">
            <span class="box-content">
                <li>width: 200px</li>
                <li>height: 150px</li>
                <li>padding: 20px</li>
                <li>border: 10px</li>
                <li>margin: 30px</li>
            </span>
        </article>
        <!-- IE盒子模型（border-box） -->
        <h3>IE盒子模型（border-box）</h3>
        <article class="ie-box">
            <span class="box-content">
                <li>width: 200px</li>
                <li>height: 150px</li>
                <li>padding: 20px</li>
                <li>border: 10px</li>
                <li>margin: 30px</li>
            </span>
        </article>
        
        <p>说明：两个盒子的CSS中设置了相同的width和height，但<strong>标准盒子模型</strong>实际占用空间更大（因为width/height仅包含内容区，padding和border是“额外扩展”的）；而<strong>IE盒子模型</strong>的width/height已包含padding和border，所以整体更紧凑。</p>
    </section>
</body>
</html>